(function () {
    var startx, ulx, movex, leftul, wstop;
    var titleid = 0;
    init()
    function init() {

        /* 导航栏*/
        $.ajax({
            url: "http://chst.vip:1234/api/getbaicaijiatitle",
            type: "Get",
            data: {

            },
            success(suc) {
                var htmlnav = "";
                // 动态生成导航栏
                suc.result.forEach(item => {
                    htmlnav += `
                        <li titleid=${item.titleId}>${item.title}</li>
                    `
                })
                $("nav>div>ul").html(htmlnav)
            }
        }).then(res => {
            // 设置拉动导航栏滑动到对应位置
            var ul = document.querySelector("nav ul");
            ul.onclick = function (e) {
                //当点击的时候改变li的颜色
                // console.log(e.target);
                $(e.target).siblings().css("color", "#333333").end().css("color", "red");
                //   点击标题获取标题的titleid,并且调用创建内容的函数
                titleid = $(e.target).attr("titleid");
                creatproductlist();
            }
            //接触ul的时候触发事件
            ul.addEventListener("touchstart", function (e) {
                //获取鼠标按下去的时候的位置
                startx = e.targetTouches[0].clientX;
                //获取鼠标按下去的时候的nav下ul的左边距离nav最左边的距离
                ulx = $("nav ul").offset().left;
            })
            //鼠标按着不放的时候触发的事件
            ul.addEventListener("touchmove", function (e) {
                movex = e.targetTouches[0].clientX;
                //鼠标滑动时移动的距离
                leftul = ulx + movex - startx;
                if (leftul < ($("nav").width() - $("nav ul").width() - 40)) {
                    leftul = $("nav").width() - $("nav ul").width() - 40
                }
                if (leftul > 40) {
                    leftul = 40
                }
                ul.style.left = (leftul) + "px";
            })

            //鼠标弹起
            ul.addEventListener("touchend", function (e) {
                // 当ul最左边超出nav的时候滑动回退到nav最左边的位置，ul右边在nav左边的时候回退到和nav的位置，并且有动画
                if (leftul < ($("nav").width() - $("nav ul").width())) {
                    $("nav ul").animate({
                        left: ($("nav").width() - $("nav ul").width())
                    })
                }
                if (leftul > 0) {
                    $("nav ul").animate({
                        left: 0
                    })
                }
            })
            creatproductlist();
        })

        /*main*/
        function creatproductlist() {
            $.ajax({
                url: "http://chst.vip:1234/api/getbaicaijiaproduct",
                type: "Get",
                data: {
                    titleid
                },
                success(suc) {
                    var htmlProduct = "";
                    suc.result.forEach(item => {
                        htmlProduct += `
                        <div class="productItem" productId=${item.productId}>
                            <div class="left">${item.productImg}</div>
                            <div class="right">
                                <h3>${item.productName}</h3>
                                <p class="price">${item.productPrice}</p>
                            
                                ${item.productCouponRemain}
                            
                                <p class="youhuijuan">${item.productCoupon}<p><p class="buy">${item.productHref}
                                </p>
                        </div>
                    </div>
                        `
                    })
                    var we = 0;
                    var i = 0;
                    $("main").html(htmlProduct);
                    var kn = setInterval(() => {
                        we += 0.01;
                        i++
                        if (we > 3.14) {
                            we = 3.14;
                            $(".bar>i>em").css({
                                width: `${we}rem`
                            })
                            clearInterval(kn)
                        }
                        $(".bar>i>em").css({
                            width: `${we}rem`
                        })
                        $(".bar>i>em").html(`剩余${315 - i}张`)
                        $(".bar>i>span").html("");
                        $(".bar>b").html(`已抢${i}张`)
                        $("nav").click(function () {
                            clearInterval(kn)
                        })
                    }, 16)
                }
            })
        }
        //设置当滚动条高度大于某个值的时候回到顶部的按钮出现
        $(window).scroll(function () {
            wstop = $(window).scrollTop()
            //  console.log($(window).scrollTop());
            if ($(window).scrollTop() > 400) {
                $(".gotop")[0].style.display = "block"
            } else {
                $(".gotop")[0].style.display = "none"
            }
        })
        //  设置点击事件，当点击回到顶部按钮，以动画效果回到顶部

        $(".gotop").click(function () {
            var scro = setInterval(() => {
                wstop -= 80
                if (wstop < 0) {
                    wstop = 0
                    $(window).scrollTop(wstop);
                    clearInterval(scro);
                }

                $(window).scrollTop(wstop)
            }, 16);
        })
    }
})()